<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
       .red {
         background-color: red;
       }
    </style>
  </head>
  <body>
    <ul>
      <li class="red">aa</li>
      <li>bb</li>
      <li>cc</li>
      <li>dd</li>
    </ul>
  </body>
  <script type="text/javascript">

    (function(){
      const lis = document.querySelectorAll('ul > li');
      let index = 0,
      setRed = function(index, lis){
        lis.forEach(e => e.className = '');
        lis[index].className = 'red';
      };
      document.addEventListener('keyup', function(event){
        switch(event.keyCode){
          case 38:
            index = --index < 0 ? lis.length - 1 : index;
            setRed(index, lis);
            break;
          case 40:
            index = ++index == lis.length ? 0 : index;
            setRed(index, lis);
            break;
        }
      });
    })();
  </script>
</html>
